import React, { Component } from 'react';
import { connect } from 'dva';
import styles from './opinionRisk.less';
import getUrlParam from '@/utils/getUrlParam';
import { Tabs } from 'antd';
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util,
} from 'bizcharts';
import DataSet from '@antv/data-set';
import 'echarts/map/js/china.js';
import initChart from '@/utils/initChart';
import {
  getLineOption,
  getBarSimple,
  getMapOption,
  getPieOption,
} from '@/utils/warning-figure-chart.js';

@connect(({ opinionrisk }) => ({
  wordCloudData: opinionrisk.wordCloudData,
  msgTrendData: opinionrisk.msgTrendData,
  mediaSourceData: opinionrisk.mediaSourceData,
  areaInfoData: opinionrisk.areaInfoData,
  emotionInfoData: opinionrisk.emotionInfoData,
  positiveWordData: opinionrisk.positiveWordData,
  negativeWordData: opinionrisk.negativeWordData,
  wholeNetMsgData: opinionrisk.wholeNetMsgData,
  weixinMsgData: opinionrisk.weixinMsgData,
  weiboMsgData: opinionrisk.weiboMsgData,
}))
class opinionRisk extends Component {
  componentDidMount() {
    const { dispatch } = this.props;

    dispatch({
      type: 'opinionrisk/getWordCloudData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });

    dispatch({
      type: 'opinionrisk/getMsgTrendData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });

    dispatch({
      type: 'opinionrisk/getMediaSourceDate',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });

    dispatch({
      type: 'opinionrisk/getAreaInfoData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });

    dispatch({
      type: 'opinionrisk/getEmotionInfoData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });

    dispatch({
      type: 'opinionrisk/getPositiveWordData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });

    dispatch({
      type: 'opinionrisk/getNegativeWordData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });

    dispatch({
      type: 'opinionrisk/getWholeNetMsgData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
        sensitive_type: 2,
        origin_type: 1,
        similar_merge: 1,
      },
    });

    dispatch({
      type: 'opinionrisk/getWeixinMsgData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
        origin_type: 5,
        sensitive_type: 1,
        similar_merge: 1,
      },
    });

    dispatch({
      type: 'opinionrisk/getWeiboMsgData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
        origin_type: 2,
        sensitive_type: 1,
        similar_merge: 1,
      },
    });
  }

  render() {
    const TabPane = Tabs.TabPane;
    let {
      wordCloudData,
      msgTrendData,
      mediaSourceData,
      areaInfoData,
      emotionInfoData,
      positiveWordData,
      negativeWordData,
      wholeNetMsgData,
      weixinMsgData,
      weiboMsgData,
    } = this.props;

    if (msgTrendData && msgTrendData.data && document.getElementById('msgTrendChart')) {
      initChart(getLineOption('', msgTrendData.data.data_info), 'msgTrendChart');
    }

    if (mediaSourceData && mediaSourceData.data && document.getElementById('mediaSourceChart')) {
      initChart(getBarSimple('', mediaSourceData.data.data_list), 'mediaSourceChart');
    }

    if (areaInfoData && areaInfoData.data && document.getElementById('areaInfoChart')) {
      // console.log(areaInfoData);
      initChart(getMapOption('', areaInfoData.data.data_list), 'areaInfoChart');
    }

    if (emotionInfoData && emotionInfoData.data && document.getElementById('emotionInfoChart')) {
      // console.log(emotionInfoData);
      initChart(getPieOption('', emotionInfoData.data.data_list), 'emotionInfoChart');
    }

    let getPositiveWords = () => {
      if (positiveWordData && positiveWordData.data) {
        let result = [];
        for (var i = 0; i < positiveWordData.data.data_list.length; i++) {
          result.push(<li key={i}>{positiveWordData.data.data_list[i]}</li>);
        }
        return result;
      } else {
        return '';
      }
    };
    let getNegativeWords = () => {
      if (negativeWordData && negativeWordData.data) {
        let result = [];
        for (var i = 0; i < negativeWordData.data.data_info.length; i++) {
          result.push(<li key={i}>{negativeWordData.data.data_info[i]}</li>);
        }
        return result;
      } else {
        return '';
      }
    };

    let getWholeMsg = () => {
      if (wholeNetMsgData && wholeNetMsgData.data) {
        let result = [];
        for (var i = 0; i < wholeNetMsgData.data.data_list.length; i++) {
          result.push(
            <li key={i}>
              <p className={styles.newsTitle}>
                <a
                  href={wholeNetMsgData.data.data_list[i].original_url}
                  target="_target"
                  rel="noopener noreferrer"
                >
                  {wholeNetMsgData.data.data_list[i].title}
                </a>
              </p>
              <p className={[styles.newsMsg, 'clearfix'].join(' ')}>
                <span className={styles.fl}>
                  {wholeNetMsgData.data.data_list[i].published_time}
                </span>
                <span className={styles.fr}>
                  {wholeNetMsgData.data.data_list[i].capture_website}
                </span>
              </p>
            </li>
          );
        }
        return result;
      } else {
        return '';
      }
    };

    let getWeixinMsg = () => {
      if (weixinMsgData && weixinMsgData.data) {
        let result = [];
        for (var i = 0; i < weixinMsgData.data.data_list.length; i++) {
          result.push(
            <li key={i}>
              <p className={styles.newsTitle}>
                <a
                  href={weixinMsgData.data.data_list[i].original_url}
                  target="_target"
                  rel="noopener noreferrer"
                >
                  {weixinMsgData.data.data_list[i].title}
                </a>
              </p>
              <p className={[styles.newsMsg, 'clearfix'].join(' ')}>
                <span className={styles.fl}>{weixinMsgData.data.data_list[i].published_time}</span>
                <span className={styles.fr}>{weixinMsgData.data.data_list[i].capture_website}</span>
              </p>
            </li>
          );
        }
        return result;
      } else {
        return '';
      }
    };

    let getWeiboMsg = () => {
      console.log(weiboMsgData);
      if (weiboMsgData && weiboMsgData.data) {
        let result = [];
        for (var i = 0; i < weiboMsgData.data.data_list.length; i++) {
          result.push(
            <li key={i}>
              <p className={styles.newsTitle}>
                <a
                  href={weiboMsgData.data.data_list[i].original_url}
                  target="_target"
                  rel="noopener noreferrer"
                >
                  {weiboMsgData.data.data_list[i].title}
                </a>
              </p>
              <p className={[styles.newsMsg, 'clearfix'].join(' ')}>
                <span className={styles.fl}>{weiboMsgData.data.data_list[i].published_time}</span>
                <span className={styles.fr}>{weiboMsgData.data.data_list[i].capture_website}</span>
              </p>
            </li>
          );
        }
        console.log(result);
        return result;
      } else {
        return '';
      }
    };

    let getWordCloud = () => {
      if (!wordCloudData || !wordCloudData.data) {
        return '';
      }
      // return '';
      function getTextAttrs(cfg) {
        return _.assign({}, cfg.style, {
          fillOpacity: cfg.opacity,
          fontSize: cfg.origin._origin.size,
          rotate: cfg.origin._origin.rotate,
          text: cfg.origin._origin.text,
          textAlign: 'center',
          fontFamily: cfg.origin._origin.font,
          fill: cfg.color,
          textBaseline: 'Alphabetic',
        });
      } // 给point注册一个词云的shape

      Shape.registerShape('point', 'cloud', {
        drawShape(cfg, container) {
          const attrs = getTextAttrs(cfg);
          return container.addShape('text', {
            attrs: _.assign(attrs, {
              x: cfg.x,
              y: cfg.y,
            }),
          });
        },
      });
      const dv = new DataSet.View().source(wordCloudData.data.data_list);
      const range = dv.range('value');
      const min = range[0];
      const max = range[1];
      dv.transform({
        type: 'tag-cloud',
        fields: ['name', 'value'],
        size: [window.innerWidth, window.innerHeight],
        font: 'Verdana',
        padding: 0,
        timeInterval: 5000,

        // max execute time
        rotate() {
          let random = ~~(Math.random() * 4) % 4;

          if (random == 2) {
            random = 0;
          }

          return random * 90; // 0, 90, 270
        },

        fontSize(d) {
          if (d.value) {
            const divisor = max - min !== 0 ? max - min : 1;
            return ((d.value - min) / divisor) * (80 - 24) + 24;
          }

          return 0;
        },
      });
      const scale = {
        x: {
          nice: false,
        },
        y: {
          nice: false,
        },
      };
      function getRandomColor() {}
      return (
        <Chart height={470} width={300} data={dv} scale={scale} padding={40} forceFit>
          <Tooltip showTitle={false} />
          <Coord reflect="y" />
          <Geom type="point" position="x*y" shape="cloud" color={'value'} tooltip="value" />
        </Chart>
      );
    };

    return (
      <div className={[styles.opinionRisk, 'clearfix'].join(' ')}>
        <div className={styles.colwrap1}>
          <div className={styles.blockWrap}>
            <div className={styles.blockHead}>
              <p>关键词云</p>
            </div>
            <div style={{ height: '510px' }} className={styles.blockBody}>
              {getWordCloud()}
            </div>
          </div>

          <div className={styles.blockWrap}>
            <div className={styles.blockHead}>
              <p>全网信息走势图</p>
            </div>
            <div className={styles.blockBody} style={{ height: '360px' }} id="msgTrendChart" />
          </div>

          <div className={styles.blockWrap}>
            <div className={styles.blockHead}>
              <p>全网信息走高频词汇势图</p>
            </div>
            <div className={styles.blockBody} style={{ height: '440px' }}>
              <div className={[styles.wordWrap, 'clearfix'].join(' ')}>
                <div className={[styles.wordBox, 'fl'].join(' ')}>
                  <img src={require('./images/positive.png')} />
                  <p className={styles.wordBoxTitle}>正面词汇</p>
                  <ul className={styles.wordGroup}>{getPositiveWords()}</ul>
                </div>
                <div className={[styles.wordBox, 'fr'].join(' ')}>
                  <img src={require('./images/negative.png')} />
                  <p className={styles.wordBoxTitle}>负面词汇</p>
                  <ul className={styles.wordGroup}>{getNegativeWords()}</ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className={styles.colwrap2}>
          <div className={[styles.flexWrap, 'clearfix'].join(' ')}>
            <div className={[styles.blockWrap, 'fl'].join(' ')} style={{ width: '712px' }}>
              <div className={styles.blockHead}>
                <p>全网敏感信息提醒</p>
              </div>
              <div className={styles.blockBody}>
                <ul className={styles.wholeNetWrap}>{getWholeMsg()}</ul>
              </div>
            </div>

            <div
              className={[styles.blockWrap, 'fr'].join(' ')}
              style={{ width: 'calc(100% - 728px)' }}
            >
              <div className={styles.blockHead}>
                <p>情绪敏感度</p>
              </div>
              <div className={styles.blockBody} id="emotionInfoChart" />
            </div>
          </div>

          <div className={[styles.flexWrap, 'clearfix'].join(' ')} style={{ height: '475px' }}>
            <div
              className={[styles.blockWrap, 'fl'].join(' ')}
              style={{ width: 'calc(50% - 8px)' }}
            >
              <div className={styles.blockHead}>
                <p>媒体来源占比图</p>
              </div>
              <div className={styles.blockBody} id="mediaSourceChart" />
            </div>

            <div
              className={[styles.blockWrap, 'fr'].join(' ')}
              style={{ width: 'calc(50% - 8px)' }}
            >
              <div className={styles.blockHead}>
                <p>地域分析</p>
              </div>
              <div className={styles.blockBody} id="areaInfoChart" />
            </div>
          </div>

          <div className={styles.flexWrap}>
            <div className={styles.hotspotWrap}>
              <div className={[styles.tabWarning, 'opinion-special-tab', 'special-tab'].join(' ')}>
                <Tabs defaultActiveKey="1">
                  <TabPane tab="微信热点" key="1">
                    <ul className={styles.hotspotBox}>{getWeixinMsg()}</ul>
                  </TabPane>
                  <TabPane tab="微博热点" key="2">
                    <ul className={styles.hotspotBox}>{getWeiboMsg()}</ul>
                  </TabPane>
                </Tabs>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default opinionRisk;
